<template>
    <div v-show="show" class="loding-container">
        <div class="loding-content">
          <img src="/img/loading.gif">
          <span>正在努力加载中…</span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'loding',
  data() {
    return{
     
    }
  },
  props: {
    show: Boolean
  },
  
  created() {
    // document.documentElement.style.overflowY = 'hidden'; 
  },
  mounted: function () {
    
  },
  methods: {
  },
  watch:{
    // show: function () {
    //   if(!this.show){
    //     document.documentElement.style.overflowY = 'auto'; 
    //   }
    // }
  } 
}
</script>

<style lang="stylus" scoped>
.loding-container{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    background-color: hsla(0,0%,100%,0);
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity .1s;
    .loding-content{
        position: absolute;
        top: 50%;
        left: 50%;
        width:336px;
        height:144px;
        line-height: 144px;
        text-align: center;
        background:rgba(255,255,255,1);
        box-shadow:0px 10px 30px 0px rgba(0,0,0,0.4);
        margin-top: -72px;
        margin-left: -168px;
        img{
          display: inline-block;
          vertical-align: middle;
          width: 44px;
          height: 44px;
          margin-right: 30px;
        }
        span{
          display: inline-block;
          vertical-align: middle;
          font-size:18px;
          color:rgba(30,30,30,1);
          line-height:24px;
        }

      
    }
}
</style>
